<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>相册展示</title>
    <!-- 公共 -->
    <script type="text/javascript" charset="utf-8" src="/common/js/framework.js"></script>
    <script type="text/javascript" charset="utf-8" src="/common/js/navbar.js"></script>
    <script type="text/javascript" charset="utf-8" src="/common/js/copyright.js"></script>

    <link rel="stylesheet" href="/common/css/swiper.min.css">
    <link href="css/showAlbum.css" rel="stylesheet" type="text/css">

    <script src="js/showAlbum.js"></script>
    <script src="/common/js/swiper.min.js"></script>
    <style>
        /*html {*/
        /*    background-image: linear-gradient(#eee, #aaa);*/
        /*    height: 100%;*/
        /*}*/

        img {
            border: solid 2px;
            border-bottom-color: #ffe;
            border-left-color: #eed;
            border-right-color: #eed;
            border-top-color: #ccb;
            max-height: 100%;
            max-width: 100%;
        }

        .frame {
            background-color: #ddc;
            border: solid 5vmin #eee;
            border-bottom-color: #fff;
            border-left-color: #eee;
            border-radius: 2px;
            border-right-color: #eee;
            border-top-color: #ddd;
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25) inset, 0 5px 10px 5px rgba(0, 0, 0, 0.25);
            box-sizing: border-box;
            display: inline-block;
            /*margin: 10vh 10vw;*/
            /*height: 80vh;*/
            padding: 1vmin;
            position: relative;
            text-align: center;
        }

        .frame:before {
            border-radius: 2px;
            bottom: -2vmin;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25) inset;
            content: "";
            left: -2vmin;
            position: absolute;
            right: -2vmin;
            top: -2vmin;
        }

        .frame:after {
            border-radius: 2px;
            bottom: -2.5vmin;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
            content: "";
            left: -2.5vmin;
            position: absolute;
            right: -2.5vmin;
            top: -2.5vmin;
        }

        #remarkInputId {
            height: 300px;
            margin-right: 20px;
        }
    </style>
</head>

<body style="background-color: #f2f2f2;">
<!--<div class="frame">-->
<!--    <img src="image/picNone.png">-->
<!--</div>-->
<div class="layui-card" id="photoListId">
    <div class="layui-card-body">
        <div class="operaButtonGroup" style="display: flex">
            <div style="width: 300px">
                <div class="coverImgWrapper">
                    <img v-if="photoList.length == 0" class="coverImg" src="image/picNone.png" alt="封面"/>
                    <img v-if="photoList.length != 0" class="coverImg" :src="photoList[0].fileurl"/>
                </div>
                <ul class="albumInfo">
                    <li class="albumName" title=""></li>
                    <li class="photoCount">{{photoList.length}}张 /</li>
                    <li class="albumPower"></li>
                </ul>
<!--                <a class="layui-btn layui-btn-normal" id="uploadImg">上传照片</a>-->
<!--                <a class="layui-btn layui-btn-normal" id="editImg">编辑</a>-->
<!--                <a class="layui-btn layui-btn-normal" id="meihua">美化照片</a>-->
<!--                <a class="layui-btn layui-btn-primary" id="cancelEdit">取消编辑</a>-->
            </div>

            <div style="display: flex;align-items: center;">
                <span style="width: 50%">开始时间:</span><input  type="text" id="begin" class="layui-input">
                <span style="margin-left: 10px; width: 50%;">结束时间:</span><input  type="text" id="end" class="layui-input">
                <button @click="initAlbum()" style="padding: 10px 20px;border: none;background: yellowgreen;color: white;width: 50%;">
                    查询
                </button>
            </div>


        </div>
        <div class="mngButtonGroup">
            <a class="layui-btn layui-btn-normal" id="sureDelete">删除</a>
            <a class="layui-btn layui-btn-normal" id="selectAll">全选</a>
        </div>
    </div>
    <div class="photoShowGallery">
<!--        <span class='emptyAlbum' v-if="photoList.length == 0">相册为空</span>-->
        <ul class="photoList" v-if="photoList.length != 0">
            <li v-for="(item,index) of photoList"
                class="list-item"
                :key="index"
                @click="showPhotoDetail(index)"
            >
                <div class="list-item-wrapper">
                    <img class="photoItem" :src="item.fileurl.replace('.'+item.extendname,'_min.'+item.extendname)"
                         alt="照片展示">
                    <div class="maskImg" @click.stop="handleSelectIcon(index)"></div>
                    <div class="selectIcon" :id="item.fileid" @click.stop="handleSelectIcon(index)"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="swiperWrapper">
        <!--退出按钮-->
        <button type="button" class="layui-btn layui-btn-sm exitButton">
            <i class="layui-icon layui-icon-close"></i>
        </button>
        <!--轮播图渲染区域-->
        <div class="imgListWrapper" style="width: 97%;"></div>
        <!--照片信息展示区域-->
        <div class="imgInfoWrapper">
            <div class="titleWrapper">
                <img class="userHeadImg" :src="activePhotoInfo.fileurl" alt=""/>
                <div class="imgInfo">
                    <div class="imgInfoTop">
                        <div class="swipperPhotoName">{{activePhotoInfo.filename}}</div>
                    </div>
                    <div class="imgTime">{{activePhotoInfo.uploadtime}}</div>
                </div>
            </div>
            <div class="imgOperation">
                <span @click="updatePhotoCount(activePhotoInfo.fileid)" class="imgOperaIcon imgLike" title="点赞">
                    <i class="layui-icon layui-icon-praise"></i>
                    <label style="position: relative;bottom: 5px;">{{activePhotoInfo.primarirycount}}</label>
                </span>
                <span class="imgOperaIcon imgComments" title="评论">
                    <i class="layui-icon layui-icon-reply-fill"></i>

                    <label style="position: relative;bottom: 5px;">{{activePhotoInfo.comcount}}</label>
                </span>
                <!-- <span class="imgOperaIcon imgDelete" title="删除"
                      @click="deletePhoto(activePhotoInfo.imageurl,activePhotoInfo.fileid,activePhoto)">
                    <i class="layui-icon layui-icon-delete"></i>
                </span> -->
            </div>
            <div class="imgCommentsUserOpera">
                <div class="layui-form-item layui-form-text">
                    <div class="remark-list">
                        <div class="remark-item" v-for="(remark,index) of remarkList"
                             style="padding-bottom: 15px;margin-top: 15px;">
                            <a class="remark-item-left"
                               style="display: inline-block;padding-right: 10px;margin-bottom: 25px;">
                                <img class="img-xs" src="image/niming.jpg" style="    width: 40px;">
                            </a>
                            <div class="remark-text"
                                 style="width: 440px;display: inline-block;position: relative;top: 20px;">
                                <div>
                                    <a style="color: #0645e8;">{{remark.userBean.username}}</a>
                                    <div>{{remark.remarkDate}}</div>
                                </div>
                                <div>{{remark.remarkContent}}</div>
                                <a style="float: right;color: red;position: relative;bottom: 30px;"
                                   @click="clickReply(remark)">回复</a>
                            </div>
                            <div style="margin-left: 55px;background-color: #c4ffe6;">
                                <div v-for="(reply,index) of remark.replyList">
                                    <div class="replay-text"
                                         style="overflow: hidden;width: auto;display: inline-block;">
                                        <p style="height: 25px;line-height: 25px;padding: 5px;">
                                            <a style="color: #0645e8;">{{reply.replyUserName}}</a>&nbsp;回复
                                            <a style="color: #0645e8;">{{reply.repliedUserName}}：</a>
                                            {{reply.replyContent}}
                                        </p>

                                    </div>
                                    <a style="float: right" @click="clickReply(reply)">回复</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" class="layui-textarea" id="remarkInputId"></textarea>
                    </div>
                    <label class="layui-form-label layui-btn layui-btn-normal" style="width: 200px"
                           onclick="remarkConfirm()">发表评论</label>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- <div id="navbottomBarId"></div> -->

</body>
<!--模板引擎-->
<script type="text/html" id="swiperTemplate">
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            {{each list v i}}
            <div class="swiper-slide">
                <img class="bigImg" src="{{v.fileurl}}" alt="大图查看"
                     data-name="{{v.filename}}" data-time="{{v.uploadtime}}"/>
            </div>
            {{/each}}
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            {{each list v i}}
            <div class="swiper-slide" style="text-align: center;">
                <img class="thumbsImg" src="{{v.fileurl.replace('.'+v.extendname,'_min.'+v.extendname)}}" alt="缩略图"/>
            </div>
            {{/each}}
        </div>
    </div>
</script>


<script>
    let indexContent, layedit
    layui.use(['table', 'upload', 'form', 'layedit', 'laydate'], function () {
        let $ = layui.$,
            form = layui.form,
            upload = layui.upload,
            laydate = layui.laydate;
        layedit = layui.layedit

        //执行一个laydate实例
        laydate.render({
            elem: '#begin', type: 'date' //指定元素
        });
        laydate.render({
            elem: '#end', type: 'date' //指定元素
        });
        //下拉框选择某一项
        layui.form.on('select(mySelect)', function (data) {
            console.log(data);
        })
    });
</script>

<!-- <script>
    $(document).ready(function () {
        $("#navbottomBarId").hide()
    })
</script> -->

</html>